<template>
    <div class="body j_zixun">
        <div class="j_zixun">
            <div class="j_posi_back"></div>

            <div class="j_zixun_box">
                <div class="j_zx_navbox" style="height: 1.1307rem">
                    <ul>
                        <li
                            :class="{ j_zx_active: item.cat_id == tabNav }"
                            v-for="(item, index) in tabNavlist"
                            :key="index"
                            @click="changeFenlei(item.cat_id)"
                        >
                            {{ item.cat_name }}
                        </li>
                    </ul>
                </div>

                <!-- 资讯列表 -->
                <div
                    class="j_zixun_listbox"
                    v-if="JSON.stringify(newsInfo) != '{}'"
                >
                    <ul v-for="(item, index) in newsInfo.data" :key="index">
                        <a
                            class="j_zixun_li0"
                            v-if="index == 0"
                            @click="
                                $router.push({
                                    path: '/zixunDetail',
                                    query: { id: item.article_id },
                                })
                            "
                        >
                            <img :src="item.thumb" @error="errorImage" alt="" />
                        </a>

                        <a
                            class="j_zixun_li1"
                            v-if="index > 3 || index == 1"
                            @click="
                                $router.push({
                                    path: '/zixunDetail',
                                    query: { id: item.article_id },
                                })
                            "
                        >
                            <dl>
                                <dd>
                                    {{ item.title }}
                                </dd>
                                <dt>
                                    <img
                                        :src="item.thumb"
                                        @error="errorImage"
                                        alt=""
                                    />
                                </dt>
                            </dl>
                            <p>发布时间：{{ item.publish_time | timer }}</p>
                        </a>

                        <a
                            class="j_zixun_li2"
                            v-if="index == 2"
                            @click="
                                $router.push({
                                    path: '/zixunDetail',
                                    query: { id: item.article_id },
                                })
                            "
                        >
                            <h1>{{ item.title }}</h1>
                            <h2>
                                <img
                                    :src="item.thumb"
                                    @error="errorImage"
                                    alt=""
                                />
                                <img
                                    :src="item.thumb2"
                                    @error="errorImage"
                                    alt=""
                                />
                                <img
                                    :src="item.thumb3"
                                    @error="errorImage"
                                    alt=""
                                />
                            </h2>
                            <p>发布时间：{{ item.publish_time | timer }}</p>
                        </a>

                        <a
                            class="j_zixun_li3"
                            v-if="index == 3"
                            @click="
                                $router.push({
                                    path: '/zixunDetail',
                                    query: { id: item.article_id },
                                })
                            "
                        >
                            <h1>{{ item.title }}</h1>
                            <h2>
                                <img
                                    :src="item.thumb"
                                    @error="errorImage"
                                    alt=""
                                />
                            </h2>
                            <p>发布时间：{{ item.publish_time | timer }}</p>
                        </a>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <component
            :is="'Pagination'"
            :pageInfo="pageInfo"
            @pageNext="pageNext"
            @changePageStatus="changePageStatus"
        ></component>
        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { axiosPost } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            tabNav: 4,
            tabNavlist: [],

            newsInfo: {
                data: [],
            },
            // 分页组件信息
            pageInfo: {
                pagingText: '',
                pageNum: 1,
                pageSatus: true,
            },
        };
    },
    computed: {
        ...mapState({
            searchVal: (state) => state.searchVal,
            searchStatus: (state) => state.searchStatus,
        }),
    },
    watch: {
        // 监听搜索按钮点击
        searchStatus(val) {
            if (val.split('%')[0] == 'false' || this.searchVal) {
                this.newsInfo.data = [];
                this.pageInfo.pageSatus = false;
                this.changeNewslist();
            }
        },
    },
    mounted() {
        this.getNewnav();
    },
    methods: {
        // 获取分类
        getNewnav() {
            axiosPost('/api/news/category', {}, (res) => {
                // console.log(res);
                if (res.status != 1) {
                    return Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                }
                this.tabNavlist = res.data;
                this.tabNav = this.tabNavlist[0].cat_id;
                this.changeNewslist();
            });
        },
        // 分页组件修改状态
        changePageStatus(data) {
            this.pageInfo.pageSatus = data;
        },
        // 分页组件回调
        pageNext(data) {
            this.pageInfo.pageNum = data;
            this.changeNewslist(data); // 根据type获取订单
        },
        // 切换分类
        changeFenlei(id) {
            this.tabNav = id;
            this.newsInfo.data = [];
            this.pageInfo.pageSatus = false;
            this.changeNewslist();
        },
        // 根据分了i获取列表
        changeNewslist(page = 1, page_size = 10) {
            axiosPost(
                '/api/news/lists',
                {
                    cat_id: this.tabNav,
                    page: page,
                    page_size: page_size,
                    q: this.searchVal,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }

                    // 分页处理
                    if (res.data.current_page == res.data.last_page) {
                        this.pageInfo.pagingText = '没有更多啦！';
                    } else {
                        this.pageInfo.pagingText = '商品加载中...';
                    }
                    this.pageInfo.pageSatus = true;

                    // 数据处理
                    res.data.data.forEach((element) => {
                        this.newsInfo.data.push(element);
                    });
                }
            );
        },
    },
};
</script>

<style lang="less" scope>
.j_zixun {
    .j_header {
        height: 2.56rem;
    }

    .content {
        background-color: rgba(0, 0, 0, 0);
        padding: 0.64rem 0;
    }

    header {
        height: auto;
    }

    .j_zixun {
        position: relative;
        overflow: hidden;
    }

    .j_posi_back {
        background: #fe333d;
        height: 1.28rem;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }

    .j_zixun_box {
        width: 15.1467rem;
        border-radius: 0.4267rem;
        margin: 0 auto;
        padding: 0.64rem 0 0 0;
        background: #fff;
    }

    /* 资讯模块 */
    .j_zx_navbox {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        border-bottom: 1px solid #eeeeee;
    }

    .j_zx_navbox ul {
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .j_zx_navbox ul li {
        font-size: 0.64rem;
        font-weight: 400;
        color: #000000;
        text-align: center;
        padding: 0 0.1707rem 0.3627rem;
        border-bottom: 0.1067rem solid transparent;
        margin: 0 0.3413rem;
    }

    .j_zx_navbox ul .j_zx_active {
        border-color: #fe333d;
        color: #fe333d;
    }

    .j_zixun_listbox ul a {
        display: block;
    }

    .j_zixun_li0 {
        padding: 0.4267rem 0.64rem;
        overflow: hidden;
        border-radius: 0.0427rem;
        height: 7.616rem;
    }

    .j_zixun_li0 img {
        width: 100%;
    }

    .j_zixun_li1 {
        border-bottom: 1px solid #dcdcdf;
        padding: 0.4267rem 0;
    }

    .j_zixun_li1 dl {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0 0.64rem;
    }

    .j_zixun_li1 dl dd {
        width: 8.1rem;
        font-size: 0.768rem;
        font-weight: 400;
        color: #000000;
        line-height: 1.024rem;
        height: auto;
        background: none;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .j_zixun_li1 dl dt {
        width: 4.9067rem;
        min-height: 2.5rem;
        margin-left: 0.64rem;
        overflow: hidden;
        border-radius: 0.0427rem;
    }

    .j_zixun_li1 dl dt img {
        width: 100%;
    }

    .j_zixun_li1 p {
        font-size: 0.512rem;
        font-weight: 400;
        color: #888888;
        padding: 0 0.64rem;
        line-height: 1.024rem;
    }

    .j_zixun_li2 {
        border-bottom: 1px solid #dcdcdf;
        padding: 0.4267rem 0;
    }

    .j_zixun_li2 h1 {
        font-size: 0.768rem;
        font-weight: 400;
        color: #000000;
        line-height: 1.024rem;
        padding: 0 0.64rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-bottom: 0.2rem;
    }

    .j_zixun_li2 h2 {
        padding: 0 0.64rem;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .j_zixun_li2 h2 img {
        width: 4.48rem;
        margin: 0 0.1067rem;
    }

    .j_zixun_li2 p {
        font-size: 0.512rem;
        font-weight: 400;
        color: #888888;
        padding: 0 0.64rem;
        line-height: 1.024rem;
        margin-top: 0.54rem;
    }

    .j_zixun_li3 {
        border-bottom: 1px solid #dcdcdf;
        padding: 0.4267rem 0;
    }

    .j_zixun_li3 h2 {
        padding: 0 0.64rem;
        overflow: hidden;
        border-radius: 0.0427rem;
    }

    .j_zixun_li3 h2 img {
        width: 100%;
    }

    .j_zixun_li3 h1 {
        font-size: 0.768rem;
        font-weight: 400;
        color: #000000;
        line-height: 1.024rem;
        padding: 0 0.64rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-bottom: 0.2rem;
    }

    .j_zixun_li3 p {
        font-size: 0.512rem;
        font-weight: 400;
        color: #888888;
        padding: 0 0.64rem;
        line-height: 1.024rem;
        margin-top: 0.54rem;
    }
}
</style>
